<script setup lang="ts">
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { hasAuth } from "@/router/utils";
import { ref } from "vue";
import { useUser } from "./utils/hook";

import { exportData } from "@/utils/common";
import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import Refresh from "@iconify-icons/ep/refresh";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "ResearchAchievBack"
});

const getScoreTotal = item => {
  let allProjectList = [
    ...item.longitudinalProjects,
    ...item.horizontalProjects,
    ...item.otherObtainRewards,
    ...item.papers,
    ...item.patents,
    ...item.transformations
  ];
  return allProjectList
    .map(v => v.score || 0)
    .reduce((prev, curr) => prev + curr, 0);
};

const formRef = ref();
const tableRef = ref();

const {
  form,
  loading,
  dataList,
  pagination,
  onSearch,
  resetForm,
  openDialog,
  doChooseAchiev,
  showDetail,
  handleDelete,
  handleSizeChange,
  handleCurrentChange
} = useUser(tableRef);
</script>

<template>
  <div style="box-shadow: none">
    <div class="w-full">
      <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
      >
        <el-form-item label="审核状态" prop="examineStatus">
          <el-select
            v-model="form.examineStatus"
            placeholder="请选择"
            clearable
            class="!w-[180px]"
          >
            <el-option label="审核中" :value="0" />
            <el-option label="已审核" :value="1" />
            <el-option label="已驳回" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="form.status"
            placeholder="请选择"
            clearable
            class="!w-[180px]"
          >
            <el-option label="进行中" :value="1" />
            <el-option label="已完成" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键词" prop="keywords">
          <el-input
            v-model="form.keywords"
            placeholder="请输入"
            clearable
            class="!w-[180px]"
          />
        </el-form-item>
        <el-form-item label="所属学科" prop="subject">
          <el-input
            v-model="form.subject"
            placeholder="请输入"
            clearable
            class="!w-[180px]"
          />
        </el-form-item>
        <el-form-item label="所属领域" prop="domain">
          <el-input
            v-model="form.domain"
            placeholder="请输入"
            clearable
            class="!w-[180px]"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :icon="useRenderIcon('ri:search-line')"
            :loading="loading"
            @click="onSearch"
          >
            搜索
          </el-button>
          <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="text-right my-3">
        <el-button
          v-if="hasAuth('researchAchiev:btn:add')"
          type="primary"
          :icon="useRenderIcon(AddFill)"
          @click="openDialog('新增')"
        >
          新增
        </el-button>
        <el-button
          v-if="hasAuth('researchAchiev:btn:export')"
          type="success"
          @click="exportData('科研成果', '/scr/achievements/export', form)"
        >
          导出
        </el-button>
      </div>

      <!-- 商品展示 -->
      <div v-loading="loading" class="teams">
        <!-- 商品列表 -->
        <div
          v-for="item in dataList"
          :key="item.id"
          class="team"
          @click="showDetail(item)"
        >
          <div class="flex items-center mb-3">
            <img
              class="mr-2"
              width="30"
              height="30"
              src="@/assets/other/achiev.png"
              alt=""
            />
            <el-tooltip
              effect="dark"
              :content="item.scrAchievementsName"
              placement="top-start"
            >
              <h4 class="text-cut cursor-pointer">
                {{ item.scrAchievementsName || "--" }}
              </h4>
            </el-tooltip>
          </div>

          <!-- 审核状态 0审核中 1已审核 2已驳回 -->
          <div class="cell">
            <el-tag v-if="item.examineStatus === 0" type="warning" size="small"
              >审核中</el-tag
            >
            <el-tag
              v-else-if="item.examineStatus === 1"
              type="primary"
              size="small"
              >已审核</el-tag
            >
            <el-tag v-else type="danger" size="small">已驳回</el-tag>
          </div>

          <!-- 字段展示 -->
          <div class="cell">
            <div class="c-title">团队名称</div>
            <div class="c-content">
              {{ item.researchTeam?.teamName || "--" }}
            </div>
          </div>
          <div v-if="item.researchTeam" class="flex">
            <div class="cell flex-1">
              <div class="c-title">负责人</div>
              <div class="c-content">
                {{ item.researchTeam?.masterUser?.name || "--" }}
              </div>
            </div>
            <div class="cell flex-1">
              <div class="c-title">联系方式</div>
              <div class="c-content">
                {{ item.researchTeam?.masterUser?.phone || "--" }}
              </div>
            </div>
          </div>

          <div class="flex">
            <div class="cell flex-1">
              <div class="c-title">所属领域</div>
              <div class="c-content">
                {{ item.domain || "--" }}
              </div>
            </div>
            <div class="cell flex-1">
              <div class="c-title">成果类型</div>
              <div class="c-content">
                {{ item.achievementsType || "--" }}
              </div>
            </div>
          </div>

          <div class="cell">
            <div class="c-title">积分</div>
            <div class="c-content">
              {{ getScoreTotal(item) || 0 }}
            </div>
          </div>
          <div class="cell">
            <div class="c-title">关键词</div>
            <div class="c-content">{{ item.keywords || "--" }}</div>
          </div>
          <!-- 操作按钮 -->
          <div class="opt" @click.stop>
            <div class="btn">
              <div
                v-if="hasAuth('researchAchiev:btn:up')"
                class="edit"
                @click="openDialog('修改', item)"
              >
                <IconifyIconOffline :icon="EditPen" />
                <div class="ml-1">修改</div>
              </div>
              <div
                v-if="hasAuth('researchAchiev:btn:addAchiev')"
                class="edit flex-1"
                @click="doChooseAchiev(item)"
              >
                <IconifyIconOffline class="text-sm" :icon="AddFill" />
                <div class="ml-1">添加成果</div>
              </div>
              <el-popconfirm
                v-if="hasAuth('researchAchiev:btn:del')"
                title="是否确认删除?"
                @confirm="handleDelete(item)"
              >
                <template #reference>
                  <div class="del">
                    <IconifyIconOffline
                      class="text-red-500 text-sm"
                      :icon="Delete"
                    />
                  </div>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>

        <el-empty
          v-if="dataList.length == 0"
          class="m-auto"
          description="暂无数据~"
        />
      </div>
      <!-- 分页 -->
      <div v-if="dataList.length > 0" class="pagination">
        <el-pagination
          background
          :default-page-size="20"
          :page-sizes="[20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
.teams {
  min-height: 250px;
  display: flex;
  flex-wrap: wrap;
  .team {
    width: 330px;
    padding: 12px 0 12px 12px;
    margin: 0 15px 15px 0;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    .cell {
      font-size: 13px;
      display: flex;
      align-items: center;
      margin-top: 10px;
      font-weight: bold;
      .c-title {
        color: #666;
        min-width: 65px;
      }
      .c-content {
        color: black;
        overflow: hidden;
        word-wrap: break-word;
        line-height: 20px;
      }
    }
    .spec {
      display: flex;
      flex-wrap: wrap;
      margin-top: 6px;
    }
    .price-box {
      color: red;
      font-size: 14px;
      .price {
        font-size: 20px;
        margin-left: 2px;
      }
      .zk-price {
        color: #999;
        margin-left: 10px;
        text-decoration: line-through;
      }
    }
    .opt {
      margin-top: 12px;
      text-align: right;
      padding-right: 12px;
      display: flex;
      justify-content: flex-end;
      .btn {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        .edit {
          font-size: 12px;
          width: 60px;
          height: 100%;
          color: #fff;
          background-color: #00a6f3;
          border-radius: 4px;
          margin-right: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        .del {
          width: 35px;
          text-align: center;
          border: 1px solid red;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }
  }
}
.pagination {
  display: flex;
  justify-content: flex-end;
  padding-right: 15px;
  margin-top: 15px;
}
</style>
